<template>
  <div class="me">
    <van-icon name="bars" />
    <div class="user">
      <div class="user_l" v-if="obj">
        <picture><img :src="obj.avatarUrl" alt=""/></picture>
        <div class="msg">
          <div class="ss">
            {{ obj.nickname }}
          </div>
          <div class="tt">
            <span class="vip">VIP续费</span>
            <span class="lv">Lv.10</span>
          </div>
        </div>
      </div>
      <div class="user_r">
        >
      </div>
    </div>
    <div class="menu">
      <van-grid square :border="false">
        <van-grid-item icon="sign" text="本地下载" @click="goBen" />
        <van-grid-item icon="diamond" text="云盘" @click="goYun" />
        <van-grid-item icon="goods-collect" text="已购" />
        <van-grid-item icon="play-circle" text="最近播放" @click="goHistory" />
        <van-grid-item icon="friends-o" text="我的好友" />
        <van-grid-item icon="star-o" text="收藏和赞" @click="goShou" />
        <van-grid-item icon="volume" text="我的播客" @click="goBoke" />
        <van-grid-item icon="add-o" text="音乐应用" />
      </van-grid>
    </div>
    <div class="like">
      <div class="like_l">
        <div class="imgs" @click="goLike()">
          <img
            src="https://img0.baidu.com/it/u=1671936243,979832808&fm=11&fmt=auto&gp=0.jpg"
            alt=""
          />
        </div>
        <div class="love">
          <span>我喜欢的音乐</span>
          <div class="xia">
            <van-checkbox v-model="checked">68首，已下载81首</van-checkbox>
          </div>
        </div>
      </div>
      <div class="like_r">
        心动模式
      </div>
    </div>
    <div class="list">
      <span>创建歌单</span>
      <span>收藏歌单</span>
      <span>歌单助手</span>
    </div>
    <div class="dan">
      <div class="top">
        <span>创建歌单</span>
      </div>
      <div class="tu" @click="goPlaylist">
        <div class="tu1">
          <div class="sport">
            <img
              src="https://img0.baidu.com/it/u=1671936243,979832808&fm=11&fmt=auto&gp=0.jpg"
              alt=""
            />
          </div>
          <div class="right">
            <span>运动歌单</span><br />
            <span>28首</span>
          </div>
        </div>
      </div>
      <div class="tu" @click="goPlaylist">
        <div class="tu1">
          <div class="sport">
            <img
              src="https://img0.baidu.com/it/u=1671936243,979832808&fm=11&fmt=auto&gp=0.jpg"
              alt=""
            />
          </div>
          <div class="right">
            <span>轻柔民谣</span><br />
            <span>48首</span>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="sss">
        <h2>为你推荐</h2>
        <van-icon name="close" @click="close" />
      </div>
      <div class="xx">
        <van-grid :border="false" :gutter="12" column-num="3">
          <van-grid-item v-for="(item, index) in topList" :key="index">
            <van-image :src="item.coverImgUrl" />
            <p>{{ item.name }}</p>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="tui">
        <span>更多推荐歌单 ></span>
      </div>
    </div>
  </div>
</template>

<script>
import { reqAccound, reqTop } from "../../api/user";
export default {
  name: "Me",
  data() {
    return {
      obj: null,
      checked: true,
      topList: [],
      id: "",
    };
  },
  methods: {
    async getUser() {
      const res = await reqAccound();
      console.log(res.data);
      this.obj = res.data.profile;
    },
    async getTui() {
      const res = await reqTop();
      console.log(res.data);
      this.topList = res.data.list.splice(0, 6);
    },
    goBen() {
      this.$router.push("/Bendi/url");
    },
    goYun() {
      this.$router.push("/yunpan/url");
    },
    goLike() {
      this.$router.push("/like/url");
    },
    goShou() {
      this.$router.push("/shoucang/url");
    },
    goHistory() {
      this.$router.push("/history/url");
    },
    goPlaylist() {
      this.$router.push("/gedan/url");
    },
    goBoke() {
      this.$router.push("/list");
    },
    close() {},
  },
  created() {
    this.getUser();
    this.getTui();
  },
};
</script>

<style scoped>
.me {
  width: 6.6rem;
  height: 16rem;
  margin: 0 auto;
  background: #f6f6f6;
  font-size: 0.24rem;
}
.van-icon {
  width: 6.6rem;
  font-size: 0.4rem;
}
.user {
  width: 6.6rem;
  height: 1.6rem;
  background: #f6f6f6;
  font-size: 0.28rem;
  margin-top: -0.5rem;
}
.user picture {
  padding: 0.4rem;
  float: left;
}
.user picture img {
  border-radius: 50%;
  width: 1.1rem;
}
.user .msg {
  height: 1.6rem;
  float: left;
}
.user .msg .ss {
  margin-top: 0.5rem;
}
.user .msg .tt {
  margin-top: 0.3rem;
}
.user .msg .vip {
  background: #999;
  color: #fff;
  border-radius: 0.2rem;
  padding: 0.03rem;
}
.user .msg .lv {
  background: #fff;
  border-radius: 0.2rem;
  padding: 0.01rem;
  color: #000;
  margin-left: 0.2rem;
}
.user .user_l {
  width: 6rem;
  height: 1.6rem;
  float: left;
}
.user .user_r {
  width: 0.6rem;
  height: 1.6rem;
  line-height: 1.6rem;
  font-size: 0.4rem;
  text-indent: 0.3rem;
  float: right;
}
.menu {
  width: 6.6rem;
  height: 2.4rem;
  border-radius: 0.1rem;
  margin-top: 0.1rem;
}
.like {
  width: 6.6rem;
  height: 1.6rem;
  background: #fff;
  font-size: 0.24rem;
  margin-top: 1.1rem;
}
.like .like_l {
  width: 5rem;
  height: 1.6rem;
  float: left;
}
.imgs {
  float: left;
}
.imgs img {
  width: 1.4rem;
  padding: 0.2rem;
}
.like .like_l .love {
  float: left;
  height: 1.6rem;
  margin-top: 0.5rem;
}
.like .like_l .xia {
  margin-top: 0.1rem;
}
.like_r {
  float: right;
  border: 1px solid #ccc;
  padding: 0.08rem;
  border-radius: 0.2rem;
  vertical-align: middle;
  margin-top: 0.7rem;
  margin-right: 0.2rem;
}
.list {
  width: 6.6rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  font-size: 0.24rem;
  line-height: 1.5rem;
  text-align: center;
}
.list span {
  padding: 0 0.4rem;
  border-right: 1px solid #000;
}
.list span:nth-child(3) {
  border-right: none;
}
.dan {
  width: 6.6rem;
  height: 4rem;
  background: #fff;
}
.top {
  width: 6.6rem;
  height: 0.6rem;
  line-height: 0.6rem;
}
.top span {
  margin-left: 0.2rem;
  float: left;
}
.tu {
  width: 6.6rem;
  height: 1.5rem;
  background: #fff;
  margin: 0 auto;
}
.tu1 {
  width: 6rem;
  height: 1.5rem;
  float: left;
}
.tu1 img {
  width: 1.4rem;
  padding: 0.2rem;
}
.tu1 .sport {
  float: left;
}
.tu1 .right {
  margin-top: 0.5rem;
  float: left;
}
.foot {
  width: 6.6rem;
  height: 8rem;
  background: #f6f6f6;
}
.sss {
  width: 6.6rem;
  height: 1rem;
}
.sss h2 {
  width: 6.2rem;
  height: 0.6rem;
  line-height: 0.6rem;
  float: left;
  text-indent: 0.2rem;
}
.sss .van-icon-close {
  width: 0.4rem;
  height: 0.6rem;
  line-height: 0.6rem;
  float: right;
}
.xx {
  margin-top: -0.2rem;
}
.xx p {
  margin-top: 0.2rem;
  color: #999;
}
.tui {
  text-align: center;
  margin-top: 0.2rem;
}
.tui span {
  border: 1px solid #999;
  border-radius: 0.6rem;
  color: #999;
}
</style>
